<template>
  <div class="app-container">
    <el-card>
      <main-header ref="mainHeader" @reset="reset" @search="search" />
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="趋势图展示" name="first">
          <div v-if="activeName === 'first' && results.length > 0" class="trend-container">
            <ve-histogram :data="chartData" :height="height" :extend="extend" />
          </div>
          <div v-else class="trend-container empty-container">
            <el-empty description="暂无任何信息" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="列表信息展示" name="second">
          <list
            :results="results"
            @detail="detail"
          />
        </el-tab-pane>
        <el-tab-pane label="实际灌溉信息" name="third">
          <irrigation
            :results="results"
            @edit="edit"
            @del="del"
            @add="add"
            @recompute="recompute"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog
      v-el-drag-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="1080px"
      @close="closeDialog"
    >
      <main-form
        :form-data="formData"
        @submit="submit"
      />
    </el-dialog>
    <el-dialog
      v-el-drag-dialog
      :title="irrigationTitle"
      :visible.sync="dialogIrrigationVisible"
      width="640px"
    >
      <irrigation-form
        :form-data="irrigationData"
        @irrigationSubmit="irrigationSubmit"
      />
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import MainHeader from './component/main-header'
import List from './component/list'
import Irrigation from './component/irrigation'
import IrrigationForm from './component/irrigation-form'
import MainForm from './component/main-form'
import CommonMixin from '@/mixin/CommonMixin'
import { getAll, getOne, addOne, updateOne, deleteOne } from '@/api/plantDetail'
export default {
  components: {
    MainHeader,
    List,
    Irrigation,
    MainForm,
    IrrigationForm
  },
  directives: { elDragDialog },
  mixins: [CommonMixin],
  data() {
    return {
      irrigationData: {},
      dialogIrrigationVisible: false,
      irrigationTitle: '新增灌溉记录',
      activeName: 'first',
      results: [],
      trends: {},
      height: 'calc(100vh - 224px)',
      title: '决策详情',
      extend: {
        color: ['#fc8452', '#409eff', '#67c23a'],
        series(v) {
          // 设置柱子的样式
          v.forEach(i => {
            i.barMaxWidth = 20
            i.stack = 'intelirri'
            i.itemStyle = {
              borderWidth: 0
            }
          })
          return v
        }
      }
    }
  },
  computed: {
    chartData() {
      const fields = [
        { namekey: 'created_at', name: '计划灌溉日期' },
        { namekey: 'amount_hsl', name: '累积耗水量(mm)' },
        { namekey: 'rainfall', name: '降雨量(mm)' },
        { namekey: 'amount_irr', name: '灌溉量(mm)' }
      ]

      return {
        columns: fields.map(val => val.name),
        rows: this.results.map((item) => {
          const temp = {}
          fields.forEach((citem) => {
            temp[citem.name] = item[citem.namekey]
            if (citem.namekey === 'created_at') {
              temp[citem.name] = item[citem.namekey].substr(0, 10)
            }
          })
          return temp
        })
      }
    }
  },
  methods: {
    async getList() {
      if (this.listQuery.plant_id) {
        const { data } = await getAll(this.listQuery)
        this.results = data.data
      }
    },
    submit(formData) {
      this.$message.success('成功')
    },
    irrigationSubmit(submitData) {
      if (submitData.id) {
        this.updateOne(submitData)
      } else {
        this.addOne(submitData)
      }
    },
    async detail(row) {
      const { data } = await getOne(row.id)
      this.formData = data
      this.dialogVisible = true
    },
    closeDialog() {
      this.getList()
    },
    add() {
      console.log(this.listQuery)
      this.irrigationData = {
        plant_id: this.listQuery.plant_id,
        created_at: '',
        amount_raw: ''
      }
      this.dialogIrrigationVisible = true
    },
    recompute(row) {
      this.$refs.mainHeader.showReComputed(row)
    },
    edit(row) {
      this.irrigationTitle = '修改灌溉记录'
      this.irrigationData = row
      this.dialogIrrigationVisible = true
    },
    del(row) {
      this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteOne(row)
        })
        .catch(() => {
          console.log('cancel')
        })
    },
    async addOne(formData) {
      const { msg } = await addOne(formData)
      this.$message.success(msg)
      this.dialogIrrigationVisible = false
      this.getList()
    },
    async updateOne(formData) {
      const { msg } = await updateOne(formData.id, formData)
      this.$message.success(msg)
      this.dialogIrrigationVisible = false
      this.getList()
    },
    async deleteOne(row) {
      const { msg } = await deleteOne(row.id)
      this.$message.success(msg)
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
